<template>
  <div class="records">
    <el-table
      :data="tableData"
      :row-style="{height:'10px;'}"
      :cell-style="{padding:'6px 0'}"
      style="width: 100%">
      <el-table-column
        prop="name"
        label="用户"
        width="343"
      >
      </el-table-column>
      <el-table-column
        prop="date"
        label="时间"
        width="343">
      </el-table-column>
      <el-table-column
        prop="option"
        width="316"
        label="操作">
      </el-table-column>
      <el-table-column
      label="详情">
      <template slot-scope="scope">
        <el-tag
          :type="scope.row.tag === '查看' ? 'nolook' : 'look'"
          disable-transitions>{{scope.row.tag}}</el-tag>
      </template>
    </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  name: 'records',
  data () {
    return {
      tableData: [{
        name: '一个大喇叭',
        date: '2021-11-27 22:31:46',
        option: '发送  扣除3火豆',
        tag: '--'
      }, {
        name: '一个大喇叭',
        date: '2021-11-27 22:31:46',
        option: '买入 NFT138',
        tag: '查看'

      }, {
        name: '一个大喇叭',
        date: '2021-11-27 22:31:46',
        option: '挂售 NFT138',
        tag: '--'
      }, {
        name: '一个大喇叭',
        date: '2021-11-27 22:31:46',
        option: '买入 NFT138',
        tag: '查看'

      }, {
        name: '一个大喇叭',
        date: '2021-11-27 22:31:46',
        option: '挂售 NFT138',
        tag: '--'
      }]
    }
  }
}
</script>
<style lang="scss">
.records {
  .el-table {
    width: 87.85% !important;
    height: 320px;
    margin-left: 83px;
    padding-left: 25px;
    padding-right: 25px;
    text-align: center;
    background: #fff;
    border: 1px solid #E6ECF2;
    border-radius: 12px;

    .el-table__header {
      width: 24px;
      height: 16px;
      font-size: 12px;
      font-weight: 400;
      color: #9AA5B5;
    }
    tbody .el-table__row td:first-child {
      color: #0066ED;
    }
    .el-tag--nolook {
      background-color: #fff;
      color: #0066ED;
      border: 0;
    }
    .el-tag--look {
      background-color: #fff;
      color: #333;
      border: 0;
    }
  }
}
</style>
